<template>
  <div class="lix-sch">
    <div class="lix-sch__header" v-if="schoolInfo !== null">
      <div class="imgs">
        <img :src="schoolInfo.cover" alt="">
      </div>
      <p class="title">{{ schoolInfo.name }}</p>
      <p class="desc">{{ schoolInfo.region }}{{ schoolInfo.address_detail }}</p>
      <div class="weui-rate-wrap lix-sch__rate">
        <ul class="weui-rate">
          <li class="weui-rate-item" v-for="(n, index) in max" :key="index" :class="{'weui-rate-item-active' : index <= schoolInfo.grade}" :data-index='index'>
            <div class="weui-rate-item-def"></div>
          </li>
        </ul>
      </div>
      <div class="follow">
        <button @click="follow" v-if="!isFollowed">+ 关注</button>
        <button @click="follow" v-else class="is-followed">已关注</button>
      </div>
    </div>
    <div class="lix-sch__content">
      <!-- <van-tabs :line-width="18">
        <van-tab v-for="item in tabTitle" :key="item.id">
          <div slot="title">
            {{ item.title }}
          </div> -->
      <ZanTab v-bind="tabTitle" :componentId="'tabTitle'" @change="handleZanTabChange" :fixed="false"/>

      <!-- 第一段List -->
      <div v-if="tabTitle.selectedId === 1" class="tabFirst" >
        <div class="lix-sch__firsttab" v-html="schoolInfo.description" v-if="schoolInfo !== null"></div>
        <div class="tab-btn">
          <button @click="callPhone">
            <image src="../../static/image/call.png" alt="" class="button-img" />
            <a>客服热线</a>
          </button>
        </div>
      </div>

      <!-- 第二段List -->
      <div v-else>
        <!-- 常规列表 -->
        <div class="lix-cate__list">
          <div class="lix-cate__item" v-for="(item, idx) in list" :key="idx" :data-id="item.id" @click="itemClick">
            <img :src="item.thumb" />
            <div class="info">
              <p class="title van-ellipsis">{{ item.name }}</p>
              <p class="author">主讲老师：{{ item.teacher }}</p>
              <p class="author">开课时间：{{ item.begintime }}</p>
              <p class="price"><span>￥</span>{{ item.price }}</p>
            </div>
          </div>
        </div>
        <ZanLoadmore :loading="loading" :nomore="! hasNextPage" v-if="!noData"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getSchoolInfoApi, followApi } from '../../api';
import ZanTab from '../../../node_modules/mpvue-zanui/src/components/zan/tab';
import { mapActions, mapGetters } from 'vuex';
import { COURSE_GET_LIST } from '../../store/mutation-types';
import ZanLoadmore from '../../../node_modules/mpvue-zanui/src/components/zan/loadmore';

export default {
  components: {
    ZanTab,
    ZanLoadmore
  },
  computed: {
    ...mapGetters('courseList', {
      list: 'list',
      loading: 'loading',
      hasNextPage: 'hasNextPage',
      noData: 'noData',
      currentPage: 'currentPage'
    })
  },
  data() {
    return {
      schoolId: null,
      tabTitle: {
        list: [{
          id: 1,
          title: '学校简介'
        }, {
          id: 2,
          title: '精品课程'
        }],
        scroll: true,
        selectedId: 1,
        height: 60
      },
      max: 5,
      schoolInfo: null,
      isFollowed: false
    };
  },
  onLoad(option) {
    this.schoolId = option.id;
    this.getSchoolInfo(this.schoolId);
    this.getSchoolClassList(1);
  },
  onUnload() {
    console.log('页面卸载');
    this.destroyedState();
  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.getListData(this.currentPage + 1);
    }
  },
  methods: {
    ...ZanTab.methods,
    ...mapActions('courseList', {
      'getSchoolCourseList': COURSE_GET_LIST,
      'destroyedState': 'destroyedState'
    }),
    handleZanTabChange(e) {
      const {componentId, selectedId} = e;
      this[componentId].selectedId = selectedId;
    },
    getSchoolInfo(id) {
      getSchoolInfoApi(id)
        .then(res => {
          this.schoolInfo = res.data;
          this.tel = 'tel:' + res.data.telephone;
          this.isFollowed = res.data.followed;
          console.log(this.schoolInfo);
        })
        .catch(e => {
          console.log(e);
        });
    },
    getSchoolClassList(page) {
      this.getSchoolCourseList({page: page, id: this.schoolId});
    },
    follow() {
      followApi({
        model: 'school',
        model_id: this.schoolId
      })
        .then(res => {
          this.isFollowed = res.data;
          console.log(res);
        })
        .catch(e => {
          console.log(e);
        });
    },
    itemClick(e) {
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/courseDetail?classid=' + id
      });
    },
    callPhone() {
      console.log('拨打电话');
      wx.makePhoneCall({
        phoneNumber: this.schoolInfo.telephone,
        success: function(res) {
          console.log('拨打成功');
        },
        fail: function(e) {
          console.log('拨打失败');
          console.log(e);
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import '../../theme-chalk/_rate.scss';
p {
  margin: 0;
  padding: 0;
}
.lix-sch {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  background-color: #fff;
  min-height: 100%;

  & .lix-sch__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    border-bottom: 10px solid #f5f5f5;

    img {
      width: 181px;
      height: 105px;
      border-radius: 5px;
    }

    & .title {
      margin-top: 20px;
      font-size: 18px;
      color: #333333;
      font-weight: 900;
    }

    & .desc {
      margin-top: 12px;
      font-size: 12px;
      color: #6d6d6d;
    }

    & .rate {
      margin-top: 10px;
    }

    & .follow {
      & button {
        margin-top: 10px;
        width: 63px;
        height: 25px;
        border-radius: 13px;
        border: 1px solid #ff6046;
        background-color: #fff;
        color: #ff6046;
        padding: 0;
        font-size: 13px;
        line-height: 25px;
        .is-followed {
          border: 1px solid #d3d3d3;
          background-color: #fff;
          color: #d3d3d3;
        }
      }
      & button.is-followed {
        border: 1px solid #d3d3d3;
        background-color: #fff;
        color: #d3d3d3;
      }
      padding-bottom: 10px;
    }
  }

  & .lix-sch__content {
    & scroll-view {
      height: 44px !important;
    }
    .tabFirst {
      margin: 0 10px;

      & button {
        width: 356px;
        height: 40px;
        background-color: #f8b551;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        border: none;
      }

      & .button-img {
        height: 27px;
        width: 27px;
      }

      & .tab-btn {
        position: fixed;
        bottom: 10px;
        left: 10px;
        & > button > a {
          color: white;
        }
      }
    }
  }
  .lix-cate__item {
    display: flex;
    padding: 15px 35px 15px 10px;
    border-bottom: 1px solid #efefef;
  }
  .lix-cate__item > img {
    flex: 0 0 43%;
    width: 142px;
    height: 82px;
  }
  .lix-cate__item .info {
    flex: 0 0 57%;
    max-width: 200px;
    margin-left: 10px;
  }
  .lix-cate__item .info .title {
    font-size: 16px;
    color: #292929;
  }
  .lix-cate__item .info .author {
    margin-top: 2px;
    font-size: 12px;
    color: #939393;
  }
  .lix-cate__item .info .price {
    margin-top: 6px;
    font-size: 14px;
    color: #ff0036;
  }
  .lix-cate__item .info .price ._span {
    font-size: 10px;
  }
}

.lix-sch__rate {
    margin: 10px auto 0 auto;
}
.lix-sch__nav--body {
  height: 80rpx;
  width: 750rpx;
  white-space: nowrap;
  background: #fff;
  // border-top: 1rpx solid #cbcbcb;
  overflow: hidden;
}
.lix-sch__nav--body .item {
  display: inline-block;
  height: 80rpx;
  min-width: 150rpx;
  padding: 0 16rpx;
  text-align: center;
}
.lix-sch__nav--body .item .name {
  display: block;
  height: 76rpx;
  padding: 0 20rpx;
  line-height: 80rpx;
  color: #808080;
  font-size: 32rpx;
  width: auto;
}
.lix-sch__nav--body .item.active .name {
  color: #ff2445;
  border-bottom: 4rpx solid #ff2445;
}
.zan-tab__bd--scroll .zan-tab__item {
  min-width: 50%;
}
.zan-tab {
  height: 60px;
}
rich-text {
  font-size: 14px;
}
</style>
